{% extends "themes/" + sysSettings.systemTheme + "/layout.html" %}

{% block head %}
<title>{{sysSettings.siteName}} - Topics</title>
{% endblock %}

{% block body %}
<div class="container-fluid p-2" id="index-videos-container">
    <div class="row">
        <div id="topicsList" class="col-lg col-xs-12 col-sm-12">
            <div class="row mx-2">
                <div class="col-12 col-md-10 col-lg-11">
                    <div class="index-live-title"><b>Topics</b></div>
                </div>
                <div class="col-12 col-md-2 col-lg-1">
                    <span class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle shadow" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-sort"></i> Sort
                        </button>
                        <div class="dropdown-menu shadow" aria-labelledby="dropdownMenuButton">
                            <span class="sort dropdown-item" data-sort="name">Sort by Name</span>
                        </div>
                    </span>
                </div>
            </div>
            <ul class="itemList list d-flex flex-wrap justify-content-start">
                {% for topic in topicsList %}
                    <li class="displayCard mx-4 my-3">
                      <a href="/topic/{{topic.id}}/">
                        <div class="displayCard-thumbnail zoom">
                          <div class="video-badges"></div>
                          <img class="shadow lazy" src="/images/{{topic.iconClass}}" onerror="this.src='/static/img/video-placeholder.jpg';">
                        </div>
                        <div class="card-data my-2">
                          <div class="card-cut-text name"><b>{{topic.name}}</b></div>
                        </div>
                      </a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    topicListOptions = {
        valueNames: ['name']
    };

    var topicList = new List('topicsList', topicListOptions);
</script>
{% endblock %}


